<template>
  <view class="container">
    <view class="list">
      <view class="box">
        <view class="row">
          <view class="text">项目名称：</view>
          <view class="right">
            <view class="name">{{ info.project_name }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text">报名岗位：</view>
          <view class="right">
            <view class="name">{{ info.post_name }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text">学生信息：</view>
          <view class="right">
            <view class="name">{{ info.student_prove_info.username }}，{{ info.student_prove_info.mobile }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text">体验时间：</view>
          <view class="right">
            <view class="desc">{{ info.time }}</view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="row">
          <view class="text">学生证：</view>
          <view class="img-box">
            <image :src="info.student_prove_info.xsz_img" mode="aspectFill" @click="previewImg"></image>
          </view>
        </view>
        <view class="row">
          <view class="text">证件照片：</view>
          <view class="img-box">
            <image :src="item.path" mode="aspectFill" @click="previewImgs(index)" v-for="(item, index) in info.student_prove_info.imgs" :key="index"></image>
          </view>
        </view>
      </view>
      <view class="box" v-if="info.status == 1">
        <view class="row">
          <view class="text">审核状态：</view>
          <view class="right">
            <label>
              <radio class="radio round color" color="#32A4FF" :checked="is_agree" @click="check(true)" style="background: #FFF"/>
              通过
            </label>
            <label>
              <radio class="radio round color" color="#32A4FF" :checked="!is_agree" @click="check(false)" style="background: #FFF"/>
              不通过
            </label>
          </view>
        </view>
        <view class="row" v-if="!is_agree">
          <view class="text"></view>
          <view class="right">
            <textarea class="textarea" @input="changeReason" placeholder="请填写不通过原因"></textarea>
          </view>
        </view>

        <view class="btn-box">
          <view class="btn" @click="submit">立即提交</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      index: 0,
      info: [],
      is_agree: true,
      refuse_reason: ''
    }
  },

  onLoad(options) {
    var {id, index} = options;
    this.id = id;
    this.index = index;
    this.examinePostJoinDetail(id);
  },


  methods: {
    check: function (choose) {
      this.is_agree = choose;
    },

    previewImg: function (){
      uni.previewImage({
        urls: [this.info.student_prove_info.xsz_img]
      })
    },

    previewImgs: function (index){
      var imgs = this.info.student_prove_info.imgs;
      uni.previewImage({
        current: index,
        urls: imgs.map(image => image.path)
      })
    },


    changeReason: function (e) {
      this.refuse_reason = e.detail.value;
    },

    submit: function () {
      var status = this.is_agree ? 2 : -1,
        id = this.id,
        refuse_reason = this.refuse_reason;

      this.$http.post('/index/Api/doStudentPost', {id, status, refuse_reason}).then(res => {
        if (res.data.result == 1) {
          var prev_page = getCurrentPages()[getCurrentPages().length - 2];

          if(prev_page.route == 'pages/join_status/join_status'){
            var list = prev_page.$vm.list,
              index = this.index;

            if(prev_page.$vm.status == 0){
              prev_page.$vm.list[index].status_desc = status == -1 ? '未通过' : '已审核';
              prev_page.$vm.list[index].status = status;
            }else{
              list.splice(index, 1)
              prev_page.$vm.list = list;
            }
          }

          uni.showToast({
            title: res.data.msg,
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 500)
            }
          })

        } else {
          this.$common.doErrorResult(res)
        }
      })
    },

    examinePostJoinDetail: function (id) {
      this.$http.post('/index/Api/examinePostJoinDetail', {id}).then(res => {
        if (res.data.result == 1) {
          this.info = res.data.data
        } else {
          this.$common.doErrorResult(res)
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f5f5f5;

  .list {

    .box {
      display: flex;
      flex-direction: column;
      padding: 16rpx 24rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .row {
        display: flex;
        align-items: flex-start;
        margin-top: 14rpx;

        .text {
          font-size: 28rpx;
          width: 140rpx;
          font-weight: bold;
        }

        .right {
          min-width: 0;
          flex: 1;
          display: flex;
          align-items: flex-end;
          font-size: 24rpx;
          color: #3D3D3D;
          margin-left: 20rpx;

          .count {
            width: 100rpx;
          }

          .name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .info-box {
            display: flex;
            justify-content: space-between;
            width: 230rpx;
            margin-left: 20rpx;
          }

          .type {
            background: #b574ff;
            padding: 2rpx 16rpx;
            border-radius: 10rpx;
            font-size: 18rpx;
            color: #fff;
          }

          .time {
            flex: 1;
          }

          label {
            display: flex;
            align-items: center;
            margin-right: 50rpx;
          }

          .textarea {
            padding: 20rpx;
            border: 1rpx solid #f5f5f5;
            width: 70%;
            height: 120rpx;
          }
        }

        .img-box {
          width: 50%;

          image {
            width: 100%;
            height: 220rpx;
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;

        .btn {
          font-size: 24rpx;
          color: #fff;
          background: #32a4ff;
          width: 100%;
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          border-radius: 50rpx;
          text-align: center;
        }
      }

    }
  }

}

</style>
